<template>
	<statusBarVue :title="pageTitle" :isShowBar="true" :isShowLeft="true" />
	<view class="mall-page" :style="pageHaveBarStyle">
		<view class="group mall-list-group"
			:style="{ height: 'calc('+ pageHeighthaveBar +'px - 36px - 15px - 18px - 46px)' }">
			<view class="mall-category" v-if="tabIndex === 0">
				<view class="search-area" @click="goToPage('/homePages/mall/search')">
					<uni-search-bar radius="36" placeholder="搜索服务" clearButton="auto" cancelButton="none" readonly />
				</view>

				<view class="mall-category-box">
					<view class="nav">
						<view class="nav-item" @click="handleSelectNav(item, index)"
							:class="navIndex === index ? 'active' : ''" v-for="(item,index) in categories"
							:key="'categories-'+index">
							{{item.name}}
						</view>
					</view>
					<view class="wares">
						<view v-for="(v,i) in waresDate" :key="'waresDate'+i" class="wares-chunk">
							<view class="wares-tit">{{v.name}}</view>
							<view v-for="(ii,key) in v.skus" :key="'waresDate-skus-'+key" class="wares-chunk-details"
								@click="goToPage('/homePages/mall/detail')">
								<img src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/5c09f5c9-6fa8-4b4c-a975-49f8019c0d7e.jpg" alt="" class="wares-img" />
								<view class="wares-describe">
									<view class="wares-name">{{ii.name}}</view>
									<view class="wares-price">
										<text class="unit">¥</text>{{ii.price}}元
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>
			<view class="my-order" v-if="tabIndex === 1">
				<orderVue :pageHeighthaveBar="pageHeighthaveBar"/>
			</view>
		</view>
		<view class="group mall-tab">
			<view class="group-item" @click="tabIndex = 0">
				<icon class="icon icon-category"></icon>
				<view>分类</view>
			</view>
			<view class="group-item" @click="tabIndex = 1">
				<icon class="icon icon-mall"></icon>
				<view>我的订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';
	import orderVue from './order.vue';

	import {
		getProducts,
	} from '@/utils/api.js';

	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue,
			orderVue
		},
		data() {
			return {
				pageTitle: '商城',
				tabIndex: 0,
				navIndex: 0, // 商品下标
				categories: [],
				waresDate: []
			}
		},
		watch: {
			tabIndex(n, o) {
				switch (n) {
					case 0:
						this.pageTitle = '商城'
						break;
					case 1:
						this.pageTitle = '我的订单'
						break;
				}
			}
		},
		onShareAppMessage() {
			// 监听用户右上角的转发
		},
		onShareTimeline() {
			// 监听用户右上角的分享到朋友圈
		},
		onShow() {
			this.getProductsApi();
		},
		methods: {
			handleSelectNav(item, index) {
				this.navIndex = index;
				this.waresDate = item.commodities;
			},

			// 请求 list 
			getProductsApi() {
				getProducts().then(res => {
					if (res.code === 200) {
						this.categories = res.data.categories;
						this.handleSelectNav(res.data.categories[0], 0);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.mall-page {
		position: fixed;
		left: 0;
		right: 0;
		overflow: hidden;
		z-index: 99;



		.mall-list-group {
			width: 100%;
			height: auto;

			.mall-category {
				height: 100%;

				.search-area {
					width: 92vw;
					margin: 15px auto 18px;

					.uni-searchbar {
						padding: 0;
					}
				}

				.mall-category-box {
					width: 100%;
					display: flex;
				}

				.nav {
					width: 99px;
					background-color: #F5F6FA;
					overflow: auto;

					&>.nav-item {
						width: 100%;
						height: 52px;
						line-height: 52px;
						text-align: center;
						font-weight: 400;
						font-size: 14px;
						color: #1E1F23;
						position: relative;


						&.active {
							background-color: #fff;
							color: #22a366;

							&::before {
								content: '';
								display: inline-block;
								width: 4px;
								height: 22px;
								background: #22A366;
								border-radius: 0 2px 2px 0;
								position: absolute;
								top: 0;
								bottom: 0;
								left: 0;
								margin: auto;
							}
						}
					}
				}

				.wares {
					width: calc(100% - 99px);
					background-color: #fff;
					padding: 12px;
					overflow: auto;
					flex: 1;

					.wares-chunk {
						margin-bottom: 20px;

						.wares-tit {
							font-weight: 600;
							font-size: 13px;
							color: #2C2C2C;
							margin-bottom: 21px;

							&::before {
								content: '';
								display: inline-block;
								width: 3px;
								height: 15px;
								background: #22A366;
								margin-right: 4px;
								position: relative;
								top: 2px;
							}
						}

						.wares-chunk-details {
							display: flex;
							margin-top: 20px;
							align-items: center;

							.wares-img {
								width: 66px;
								height: 66px;
								margin-right: 10px;
							}

							.wares-describe {
								width: calc(100% - 66px);
								display: grid;
								height: 66px;
								align-content: space-between;

								.wares-name {
									font-weight: 600;
									font-size: 13px;
									color: #2C2C2C;
								}

								.wares-price {
									font-weight: 600;
									font-size: 17px;
									color: #F54D3B;
									margin-top: 2vw;

									.unit {
										font-size: 11px;
									}
								}
							}

						}
					}
				}
			}
		}

		.mall-tab {
			width: 100%;
			height: 46px;
			position: fixed;
			bottom: 0;
			padding-bottom: calc(env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-around;
			align-items: flex-end;
			text-align: center;
			background-color: #fff;

			.icon {
				width: 22px;
				height: 22px;

				&+view {
					font-weight: 400;
					font-size: 10px;
					color: #585858;
					text-align: center;
				}

				&-category {
					background: url('/static/images/icon/category.png') no-repeat 0px 0px;
					background-size: 100% 100%;
				}

				&-mall {
					background: url('/static/images/icon/my-d.png') no-repeat 0px 0px;
					background-size: 100% 100%;
				}
			}
		}

	}
</style>